import 'package:find_friend/const/const.dart';
import 'package:find_friend/pages/mine/model/clothmodel.dart';
import 'package:flutter/material.dart';

import 'mine_pageindicator.dart';

class MineChooseDressWidget extends StatefulWidget {
  
  final ResponseCloth response;

  const MineChooseDressWidget({Key key, this.response}) : super(key: key);

  @override
  _MineChooseDressWidgetState createState() => _MineChooseDressWidgetState();
}

class _MineChooseDressWidgetState extends State<MineChooseDressWidget> with SingleTickerProviderStateMixin{
  
  int selectIndex = 0;
  int length = 0;
  int currPage = 0;
  int perCount = 10;
  @override
  void initState() {
    super.initState();
  }

  @override
  void didUpdateWidget(MineChooseDressWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
  }
  
  List<Widget> _createList(double width) {
    List<Widget> list = [];
    if(widget.response == null) return list;
    ClothTypeModel model = widget.response.data[selectIndex];
    if(model.data == null) return list;
    int count = currPage * perCount + perCount > model.data.length ? (model.data.length - currPage * perCount) : perCount;
    List<ClothModel> models = model.data.getRange(currPage * perCount, currPage * perCount + count).toList();
    list = models.map((element) { 
      return Image.network(element.mainimage, width: width, height: width, fit: BoxFit.scaleDown,);
    }).toList();
    return list;
  }

  int _complePage() {
    if(widget.response == null) return 0;
    ClothTypeModel model = widget.response.data[selectIndex];
    if(model.data == null) return 0;
    setState(() {
      length = (model.data.length / perCount.toDouble()).ceil();
    });
    return length;
  }
  
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final width = (size.width - 32 - 100) / 5.0;
    return Container(
      height: 240,
      width: size.width,
      color: Colors.white,
      child: Stack(
        children: [
          Positioned.fill(
            bottom: 30,
            child: Column(
              children: [
                Container(
                  height: 20,
                  padding: const EdgeInsets.only(top: 2.5),
                  width: size.width,
                  child: _DressHeader(index: selectIndex, onTapIndex: (select) => setState(() => selectIndex = select),)
                ),
                Expanded(
                  child: PageView.builder(
                    itemCount: _complePage(),
                    pageSnapping: true,
                    onPageChanged: (val){
                      setState(() {
                        currPage = val;
                      });
                    },
                    itemBuilder: (context, page){
                      return Padding(
                        padding: const EdgeInsets.all(16),
                        child: Wrap(
                          spacing: 25,
                          runSpacing: 20,
                          children: _createList(width)
                        )
                      );
                    }
                  ),
                ),
              ],
            ),
          ),
          Positioned(
            bottom: 30,
            child: Container(
              width: MediaQuery.of(context).size.width,
              alignment: Alignment.center,
              child: SizedBox(
                height: 20,
                // child: TabPageSelector(
                //   indicatorSize: 8,
                //   color: const Color(0x80FBCF01),
                //   selectedColor: APP_main_color,
                //   controller: _tabController,
                // ),
                child: MinePageIndecatorWidget(
                  length: length, 
                  color: const Color(0x80FBCF01),
                  selectedColor: APP_main_color,
                  selectIndex: currPage,
                ),
              ),
            ),
          ),
          Positioned(
            right: 15,
            bottom: 10,
            child: InkWell(
              onTap: (){
              },
              child: Container(
                alignment: Alignment.centerRight,
                padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 5),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: APP_main_color
                ),
                child: Text("保存", style: instanceTextStyle(11, Colors.white)),
              ),
            ),
          )
        ],
      ),
    );
  }
}

class _DressHeader extends StatelessWidget {
  static const List<String> clothes = ["套装","上衣", "下装", "鞋子", "发型"];
  static const List<IconData> clothesIcons = [
    const IconData(0xe617, fontFamily: "iconfont"),
    const IconData(0xe615, fontFamily: "iconfont"),
    const IconData(0xe612, fontFamily: "iconfont"),
    const IconData(0xe618, fontFamily: "iconfont"),
    const IconData(0xe613, fontFamily: "iconfont"),
  ];
  static const List<IconData> clothesInActiveIcons = [
    const IconData(0xe616, fontFamily: "iconfont"),
    const IconData(0xe611, fontFamily: "iconfont"),
    const IconData(0xe614, fontFamily: "iconfont"),
    const IconData(0xe619, fontFamily: "iconfont"),
    const IconData(0xe60f, fontFamily: "iconfont"),
  ];

  final int index;
  final Function(int index) onTapIndex;

  const _DressHeader({Key key, this.index, this.onTapIndex}) : super(key: key);

  List<Widget> _createHeader() {
    List<Widget> list = [];
    list = clothes.map((e){
      int curr = clothes.indexOf(e);
      IconData icondata = curr == index ? clothesInActiveIcons[curr]: clothesIcons[curr];
      Color color = curr == index ? APP_main_color : APP_font_deep_grey;
      return InkWell(
        onTap: (){
          if(onTapIndex != null) onTapIndex(curr);
        },
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Icon(icondata, color: color, size: 21,),
            SizedBox(width: 5,),
            Text(e, style: instanceTextStyle(11, color),)
          ],
        ),
      );
    }).toList();
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: _createHeader(),
    );
  }
}



